<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@page isELIgnored="false" %>
<html>
<head>
    <title>详情</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!--css文件-->
    <jsp:include page="common/common-css.jsp" />
</head>
<body>

<jsp:include page="common/common-mobileButton.jsp" />

<div class="main-wrapper">
    <!--页面导航栏组件-->
    <jsp:include page="common/common-header.jsp" />

    <main class="main-content">

        <div class="single-product-area section-space-top-100">
            <div class="container">
                <div class="row">
                    <!--商品轮播图-->
                    <div class="col-lg-6">
                        <div class="single-product-img">
                            <!-- Begin Slider Area -->
                            <div class="slider-area">
                                <!-- Main Slider -->
                                <div class="swiper-container main-slider swiper-arrow with-bg_white swiper-container-fade swiper-container-initialized swiper-container-horizontal swiper-container-pointer-events">
                                    <div class="swiper-wrapper" aria-live="off" style="transition-duration: 0ms;">

                                        <div class="swiper-slide" data-swiper-slide-index="0"
                                             style="width: 568px;" role="group" aria-label="0 / 2">
                                            <img class="img-full" src="${book.cover}" alt="cover">
                                        </div>
                                        <div class="swiper-slide " data-swiper-slide-index="1"
                                             style="width: 568px;" role="group" aria-label="1 / 2">
                                            <img class="img-full" src="${book.image1}" alt="image1">
                                        </div>
                                        <div class="swiper-slide" data-swiper-slide-index="2"
                                             style="width: 568px;" role="group" aria-label="2 / 2">
                                            <img class="img-full" src="${book.image2}" alt="image2">
                                        </div>
                                    </div>
                                    <div class="swiper-button-prev" tabindex="0" role="button"
                                         aria-label="上一张">
                                    </div>
                                    <div class="swiper-button-next" tabindex="0" role="button"
                                         aria-label="下一张">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>


                    <!--商品信息-->
                    <div class="col-lg-6 pt-5 pt-lg-0">
                        <div class="single-product-content">
                            <!-- 商品名称 -->
                            <h2 class="title">${book.name}</h2>
                            <div class="review-status" style="height: 50px;">
                                分类:
                                <a href="/bookmall/types/${book.typeUrl}/1" target="_blank">
                                    ${book.typeName}
                                </a>
                            </div>
                            <!-- 作者 -->
                            <div class="review-status" style="height: 50px;">
                                作者: ${book.author}
                            </div>
                            <!-- 出版社 -->
                            <div class="review-status" style="height: 50px;">
                                出版社: ${book.publisher}
                            </div>
                            <!-- 书号 -->
                            <div class="review-status" style="height: 50px;">
                                国际标准书号: ${book.isbn}
                            </div>

                            <!-- 商品价格 -->
                            <div class="price-box">
                                <span class="new-price">¥ ${book.price}</span>
                            </div>

                            <!-- 介绍 -->
                            <p class="short-desc">${book.mark}</p>
                            <ul class="quantity-with-btn">
                                <li class="add-to-cart">
                                    <a href="javascript:;" onclick="buy(${book.id})"
                                       class="btn btn-custom-size lg-size btn-pronia-primary">加入购物车</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!--页尾-->
    <jsp:include page="footer.jsp" />
</div>

<!--js文件-->
<jsp:include page="common/common-js.jsp" />
</body>
</html>
